<template>
  <div>
      <!-- <ul
        v-infinite-scroll="loadMore"
        infinite-scroll-disabled="loading"
        infinite-scroll-distance="50"
      >
          <li v-for="data in $store.state.comingList" :key="data.filmId" @click="handleClick(data.isPresale, data.filmId)">
              <img :src="data.poster" alt="">
            <h3>{{data.name}}</h3>
              <p>主演：{{data.actors | actorfilter}}</p>
              <p>上映日期：{{data.premiereAt | formatTime}}</p>
              <p v-if="data.isPresale" style="color:red">预售</p>
          </li>
      </ul> -->
      <div class="film-act-view">
        <div class="comingSoonList-wrap">
          <ul class="comingSoonList"
            v-infinite-scroll="loadMore"
            infinite-scroll-disabled="loading"
            infinite-scroll-distance="50"
          >
              <li v-for="data in $store.state.comingList" :key="data.filmId" @click="handleClick(data.isPresale, data.filmId)" class="comingSoonList-item">
                <div class="comingSoonFilm-img">
                  <img :src="data.poster" alt="">
                </div>
                <div class="comingSoonFilm-info">
                  <div class="comingSoonFilm-name info-col">
                    <span class="name">{{data.name}}</span>
                    <span class="item">{{data.filmType.name}}</span>
                  </div>
                  <div class="comingSoonFilm-actors info-col">
                    <span class="label" v-if="data.actors">主演：{{data.actors | actorfilter}}</span>
                  </div>
                  <div class="comingSoonFilm-detail info-col">
                    <p class="label">{{data.nation}} | {{data.runtime}}分钟</p>
                    <p class="label">上映日期：{{data.premiereAt | formatTime}}</p>
                  </div>
                </div>
                <div class="comingSoonFilm-buy" v-if="data.isPresale">预购</div>
              </li>
          </ul>
        </div>
      </div>
  </div>
</template>
<script>
import Vue from 'vue'
import { MessageBox } from 'mint-ui'
// import { Indicator, InfiniteScroll } from 'mint-ui'

Vue.filter('formatTime', function (data) {
  var newtime = data * 1000
  //   function add0 (m) { return m < 10 ? '0' + m : m }
  var tranweek = function (date) {
    var dateArray = date.split('-')
    date = new Date(dateArray[0], parseInt(dateArray[1] - 1), dateArray[2])
    return '周' + '日一二三四五六'.charAt(date.getDay())
  }
  var time = new Date(newtime)
  var y = time.getFullYear()
  var m = time.getMonth() + 1
  var d = time.getDate()
  var weeken = tranweek(y + '-' + m + '-' + d)
  //   var h = time.getHours()
  //   var mm = time.getMinutes()
  //   var s = time.getSeconds()
  //   return y + '-' + add0(m) + '-' + add0(d) + ' ' + add0(h) + ':' + add0(mm) + ':' + add0(s)
  return weeken + ' ' + m + '月' + d + '日'
})
export default {
  beforeCreate () {
    this.$store.commit('comingLoadingChangeStyle')
  },
  mounted () {
    if (this.$store.state.comingList.length === 0) {
      // ajax request
      this.$store.dispatch('getComingListAction')
    } else {
      console.log('使用缓存数据')
    }
  },
  methods: {
    loadMore () {
      if (this.$store.state.comingList.length === this.$store.state.comingTotal) {
        return false
      } else if (this.$store.state.comingList.length < this.$store.state.comingTotal) {
        this.$store.dispatch('getComingListAction')
      } else {
        this.$store.commit('comingLoadingMutationt')
        console.log('使用缓存数据')
      }
    },
    handleClick (isPresale, id) {
      if (!isPresale) {
        MessageBox({
          title: '提示',
          message: '该影片目前没有排期，到首页看其他电影吧',
          showCancelButton: true
        }).then(res => {
          if (res === 'confirm') {
            this.$router.push('/film/comingSoon')
          }
        })
      }
      this.$router.push({ name: 'Detail', params: { myid: id } })
    }
  }
}
</script>
<style lang="scss" scoped>
.film-act-view {
  .comingSoonList-wrap {
    padding-bottom: 39px;
    width:100%;
    background-color: #fff;
    .comingSoonList {
      width:100%;
      .comingSoonList-item {
        position: relative;
        height: 94px;
        display: block;
        list-style: none;
        padding: 10px 0px;
         margin: 0px 10px;
        border-bottom: 1px solid #eee;
        .comingSoonFilm-img {
          float:left;
          img {
            display: block;
            width: 66px;
            height: 94px;
            background: rgb(249, 249, 211);
          }
        }
        .comingSoonFilm-info {
          float: left;
          width: calc(100% - 136px);
          height: 94px;
          padding: 0 10px;
          .info-col {
            overflow: hidden;
            -o-text-overflow: ellipsis;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 100%;
          }
          .comingSoonFilm-name {
            .name {
              max-width: calc(100% - 25px);
              color: #191a1b;
              font-size: 16px;
              height: 22px;
              line-height: 22px;
              margin-right: 5px;
              overflow: hidden;
              -o-text-overflow: ellipsis;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            .item {
              font-size: 9px;
              color: #fff;
              background-color: #d2d6dc;
              height: 14px;
              line-height: 14px;
              padding: 0 2px;
              border-radius: 2px;
            }
          }
        }
        .comingSoonFilm-actors {
          .label {
            font-size: 13px;
            margin-top: 4px;
            color: #797d82;
          }
        }
        .comingSoonFilm-detail {
          .label {
            font-size: 13px;
            margin-top: 4px;
            color: #797d82;
          }
        }
        .comingSoonFilm-buy {
          position: relative;
          top:  34px;
          float: right;
          height: 94px;
          margin:auto;
          line-height: 25px;
          height: 26px;
          width: 48px;
          color: #ffb232;
          font-size: 13px;
          text-align: center;
          border-radius: 2px;
          border:1px solid #ffb232;
        }
    }
    }
  }
}
</style>
